<template>
  <div>
    <tableComponents :pagination="{ currentPage, pageSize, total: list.all_num }" @handleCurrentChange="handleCurrentChange"
        @handleSizeChange="handleSizeChange" @sendUserSearch="receive_search" @toAdd="add_data" :isHaveExport="false" :isHaveAdd="true"
        :isShow="false" :isHavePagination="false">
      <template v-slot:table>
        <el-table ref="multipleTable" :data="list" stripe v-loading="loading" header-row-class-name="head_color" tooltip-effect="dark"
            style="width: 99.8%">
          <el-table-column label="排序" sortable :sort-method="sorta"  width="80">
            <template slot-scope="scope">
              <div>
                <el-input @change="sortNew(scope.$index, scope.row)" v-enterNumber v-model="scope.row.sort" autocomplete="off" size="small">
                </el-input>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="分类图片" min-width="120" align="center">
            <template slot-scope="scope">
              <div class="tc">
                <img style="width:80px;height:80px" :src="scope.row.piclink" class="user_img" />
              </div>
            </template>
          </el-table-column>
          <el-table-column label="分类名称" min-width="120" >
            <template slot-scope="scope">
              <div class="user_table">
                <span>分类名称：</span>
                <small>{{ scope.row.title || "----" }}</small>
                <br />
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="name" label="是否开启" min-width="80">
            <template slot-scope="scope">
              <el-switch class="zdySwith" :width="82" v-model="scope.row.show" active-color="#1aad19" inactive-color="#ffffff" active-text="开启"
                  inactive-text="关闭" active-value="1" @change="getOpen($event, scope.row)" inactive-value="0"></el-switch>
            </template>
          </el-table-column>
          <el-table-column width="300" label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="add_data(scope.row)" type="warning">编辑</el-button>
              <el-button size="mini" @click="del(scope.row.id)" type="danger">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </tableComponents>
    <el-dialog :close-on-click-modal="false" title="分类添加" class="tl size_13" width="800px" @close="dia_close" :visible.sync="dialogFormVisible">
      <el-form :model="edit_form" label-width="120px" class="demo-ruleForm" ref="ruleForm">
        <el-form-item label="分类标题">
          <el-col :span="12">
            <el-input v-model="edit_form.title"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="分类图片">
          <uploadpic :piclink="edit_form.piclink" :width="150" :height="150" :is_more="false" @send_pic="onSuccess"></uploadpic>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="saveCate">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- <el-dialog :close-on-click-modal="false" title="修改分类" :append-to-body="true" width="800px" :visible.sync="dialogeditVisible">
      <el-form>
        <el-form-item label="分类名称">
          <el-input v-model="edmsgs.title"></el-input>
        </el-form-item>
        <el-form-item label="分类图片">
          <uploadpic :piclink="edmsgs.piclink" :width="150" :height="150" :is_more="false" @send_pic="onSuccess"></uploadpic>
          <el-input v-model="edmsgs.field_upper"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="edit" type="primary">确认修改</el-button>
        </el-form-item>
      </el-form>
    </el-dialog> -->

    <keep-alive>
      <component :is="current" :show="shows" :isAll="true" showType="list" @sendShop="getSend" @isshow="getShow"></component>
    </keep-alive>
  </div>
</template>
<script>
import uploadpic from "@/components/page/pic/up_pic"; //上传图片
// import { seeType } from "@/assets/js/searchData/searchData"; //引入搜索的数据
import xzShop from "@/components/currency/xz_shop.vue";
export default {
  data () {
    return {
      shows: true,
      current: "",
      shopinfo: {
        title: ""
      },
      // userSearchData: seeType,
      dialogeditVisible: false,
      // 输入值库
      edit_form: {
        piclink: ""
      },
      // editMsg: {},
      createTime: [],
      formVideo: {
        uid: "",
        uri: "",
        is_recommend: 0,
        // title: "",
        duration: "",
        start_time: "",
        stop_time: ""
      },
      dialogaddVisible: false,
      playurl: "",
      is_edit: false,
      dialogFormVisible: false,
      live_single: {
        piclink: ""
      },
      current: "",
      loading: false,
      list: [],
      allPage: 0,
      allNum: 0,
      pageSize: 10,
      currentPage: 1,
      searchAll: {},
      row: {},
      multipleSelection: [],
      showCity: true,
      // 头像
      dialogImageUrl: "",
      dialogVisible: false,
      // 分类
      options: [
        {
          value: "0",
          label: "关闭"
        },
        {
          value: "1",
          label: "开启"
        }
      ],

      // edmsgs: {},
      nowPlace: "",
      timeMsg: []
    };
  },
  components: {
    uploadpic,
    xzShop
  },
  created () {
    this.getCate();
  },
  methods: {
    sortNew (index, row) {
      var params = {};
      params = row;
      this.$api.getTask.editTaskCate(params).then(res => {
        if (res.data.code == 200) {
          this.$swal("编辑成功！", res.data.result, "success");
          this.getCate();
        } else {
          this.$swal("出错了！", res.data.result, "error");
        }
        this.dialogeditVisible = false;
      });
    },
    getOpen (val, row) {
      var params = {};
      params = row;
      params.show = val;
      this.$api.getTask.editTaskCate(params).then(res => {
        if (res.data.code == 200) {
          this.$swal("编辑成功！", res.data.result, "success");
          this.getCate();
        } else {
          this.$swal("出错了！", res.data.result, "error");
        }
        this.dialogeditVisible = false;
      });
    },
    sorta (a, b) {
      return b - a;
    },
    
    saveCate(){
      // 保存添加和修改任务分类
      if(this.edit_form.id){
        this.edit();
      }else{
        this.add();
      }
    },
    // 添加
    add () {
      let params = this.edit_form;
      console.log("comming");
      console.log(this.edit_form);
      this.$api.getTask.addTaskCate(params).then(res => {
        if (res.data.code == 200) {
          this.$swal("添加成功！", res.data.result, "success");
          this.getCate();
        } else {
          this.$swal("出错了！", res.data.result, "error");
        }
        this.dialogFormVisible = false;
      });
    },
    // 编辑
    // toedit (item) {
    //   this.dialogeditVisible = true;
    //   this.edmsgs = item;
    // },
    // 修改
    edit () {
      let params = this.edit_form;
      this.$api.getTask.editTaskCate(params).then(res => {
        if (res.data.code == 200) {
          this.$swal("编辑成功！", res.data.result, "success");
          this.getCate();
        } else {
          this.$swal("出错了！", res.data.result, "error");
        }
        this.dialogeditVisible = false;
      });
    },
    // 删除
    del (id) {
      let params = {};
      params.id = id;
      this.$swal({
        title: "您确定要删除这些信息吗",
        text: "删除后将无法恢复，请谨慎操作！",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "是的，我要删除",
        cancelButtonText: "容我三思"
      }).then(willDelete => {
        if (willDelete.value) {
          this.$api.getTask.delTaskCate(params).then(res => {
            if (res.data.code == 200) {
              this.$swal("删除成功！", "删除成功", "success");
              this.getCate();
            } else {
              this.$swal("删除失败！", res.data.result, "error");
              this.getCate();
            }
          });
        }
      });
    },

    getCate () {
      this.$api.getTask.getTaskCate().then(res => {
        this.list = res.data.result;
        this.$store.commit("setTaskCate", res.data.result);
      });
    },

    xzshop (str) {
      if (str == "xzShop") {
        if (
          this.$store.state.shopSlist == "" ||
          this.$store.state.shopSlist.page != 1
        ) {
          this.$store.dispatch("getShopsAll", { page: 1, page_size: 10 });
        }
      }
      this.current = str;
      this.shows = true;
    },
    getShow (val) {
      this.shows = val;
    },
    getSend (row) {
      console.log(row);
      if (this.current == "xzShop") {
        console.log(row);
        this.shopinfo = row;
        this.formVideo.pid = row.id;
      }

      // this.$emit("sendRow",row)
    },

    saveeditbtn () {
      var params = {};
      params = this.edit_form;
      this.$api.getPage.edit_reply_isrecommend(params).then(res => {
        if (res.data.code == 200) {
          this.$fnc.alertSuccess(res.data.result);
          this.edit_form = {};
          this.dialogeditVisible = false;
        } else {
          this.$fnc.alertError(res.data.result);
        }
      });
    },
    onSuccess (pic) {
      // 图片上传成功的回调
      console.log("9999999999999", pic);
      this.$set(this.edit_form, "piclink", pic);
      this.$set(this.edmsgs, "piclink", pic);

      // this.$set(this.edit_form, "imgs", pic);

      // this.edit_form.cover1 = pic;
    },
    onSuccesss (pic) {
      console.log("isssss");
      this.$set(this.edmsg, "imgs", pic);
      this.$set(this.edit_form, "imgs", pic);
    },
    editbtn (item) {
      this.edit_form = item;
      this.dialogeditVisible = true;
    },

    addbtn () {
      // var params = {};
      // params = this.formVideo;
      // params.uid = this.$route.query.uid;
      // this.$api.getPage.add_reply(params).then(res => {
      //   if (res.data.code == 200) {
      //     this.$fnc.alertSuccess("添加成功");
      //     this.formVideo = {
      //       uid: "",
      //       uri: "",
      //       // title: "",
      //       duration: "",
      //       start_time: "",
      //       stop_time: ""
      //     };
      //     this.dialogaddVisible = false;
      //   } else {
      //     this.$fnc.alertError(res.data.result);
      //   }
      // });
    },

    rev_send_url (val) {
      this.formVideo.uri = val.url;
    },
    add_data (item) {
      if(item){
        this.edit_form = item;
      }else{
        this.edit_form = {};
      }
      this.dialogFormVisible = true;
    },
    change_recomment (val, row, type) {
      var params = {};
      params.id = row.id;
      if (type == "recomment") {
        params.is_recommend = val;
      } else {
        params.is_check = val;
      }
      this.$api.getPage.edit_reply_isrecommend(params).then(res => {
        if (res.data.code == 200) {
          this.$fnc.alertSuccess(res.data.result);
        } else {
          this.$fnc.alertError(res.data.result);
        }
      });
    },
    dia_close () {
      this.playurl = "";
      var x = document.getElementById("videobox");
      x.load();
    },
    showvideo (info) {
      this.dialogFormVisible = true;
      if (info.uri.indexOf("http") < 0) {
        this.playurl =
          "https://inexweb.oss-cn-shenzhen.aliyuncs.com/" + info.uri;
      } else {
        this.playurl = info.uri;
      }
      this.$nextTick(() => {
        var x = document.getElementById("videobox");
        x.load();
      });
    },
    receive_search (obj) {
      // console.log(obj)
      this.searchAll = obj;
      // this.getNewsAll(obj);
      this.getType(obj);
    },
    getNewsAll (params) {
      console.log(1, params);
      console.log("ccccc");
      params.id = this.$route.query.id;
      this.$api.getBasketBalls.getType(params).then(res => {
        if (res.data.code === 200) {
          this.loading = false;
          this.list = res.data.result;
          console.log(555);
          console.log(this.list);
        }
      });
    },
    handleSizeChange (val) {
      var params = this.searchAll;
      params.page = "";
      params.page_size = val;
      this.getNewsAll(params);
      this.pageSize = val;
    },
    handleCurrentChange (val) {
      this.currentPage = val;
      var params = this.searchAll;
      params.page = val;
      params.page_size = this.pageSize;
      this.getNewsAll(params);
    },

    reload () {
      this.getNewsAll(this.searchAll);
    },
    // 添加图片
    handleRemove (file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 删除
    beforeCreate () { }
  }
};
</script>

<style lang="less" scoped>
.myblank button {
  margin: 5px 5px 0 0;
}

.place {
  margin: 5px 0;
}
.is_item {
  display: flex;
  align-items: flex-end;
  .types {
    div {
      width: 200px;
      margin-right: 10px;
    }
    .input {
      margin: 5px 0px;
    }
    display: flex;
  }
  .btn_edit {
    height: 40px;
    margin-left: 10px;
    margin-bottom: 5px;
  }
}
</style>
